<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绑定样式</title>
  <script src="../js/vue.js"></script>
  <style>
      .basic {
          width: 400px;
          height: 100px;
          border: 1px solid black;
      }

      .happy {
          border: 4px solid red;;
          background-color: rgba(255, 255, 0, 0.644);
          background: linear-gradient(30deg, yellow, pink, orange, yellow);
      }

      .sad {
          border: 4px dashed rgb(2, 197, 2);
          background-color: gray;
      }

      .normal {
          background-color: skyblue;
      }

      .atguigu1 {
          background-color: yellowgreen;
      }

      .atguigu2 {
          font-size: 30px;
          text-shadow: 2px 2px 10px red;
      }

      .atguigu3 {
          border-radius: 20px;
      }
  </style>
</head>
<body>
<div class="app">
  <!-- 字符串 -->
  <div class="basic" :class="mood" @click="mood = 'sad'"></div>
  <!-- 对象 -->
  <div class="basic" :class="classObj" @click="changeClassObj"></div>
  <!-- 数组 -->
  <div class="basic" :class="classArr" @click="changeClassArr"></div>

  <!-- css 行内写法 -->
  <div class="basic" :style="{color: 'red', fontSize: `${fontSize}px`}"
  @click="fontSize++">abc</div>
</div>
</body>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '.app',
    data: {
      mood: 'normal',
      classObj: {
        happy: false,
        normal: true,
        atguigu1: true,
      },
      classArr: ['atguigu1', 'atguigu2'],
      fontSize: 30,
    },
    methods: {
      changeClassObj() {
        this.classObj = {
          happy: true,
          normal: false,
          atguigu1: false,
          atguigu2: true,
        }
      },
      changeClassArr() {
        this.classArr.push('atguigu3')
      }
    }
  })
</script>
</html>